<template>
	<div style="width: 800px; height: 800px; background-color: #000; border: 1px solid red; margin: 0 auto;" ref="warrrr">
		<div class="warp" ref="warp" v-show="warpVisible" :style="{ left: warpLeft + 'px', top: warpTop + 'px' }"
			@click="handleClick($event)">
			<div class="warp-conent" style="position: relative;  width: 0px; height: 0px; transform: scale(`${aaa}`);">
				<div id="duchamp-popover-point" style="position: absolute; height: 34px; transform: translate(-50%, -50%);">
					<div>
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px"
							height="34px" viewBox="0 0 34 34" version="1.1" :style="{ color: editsCss.svgLineColor }"
							class="injected-svg"
							data-src="/decision/view/duchamp/resource?resource=/com/fr/plugin/wysiwyg/web/assets/system/popover_action_point.svg&amp;tag=ea5c8ce0f8408aa9dc809c7bdeea45368b3e3582">
							<defs>
								<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-1-42">
									<stop stop-color="currentcolor" stop-opacity="0" offset="0%"></stop>
									<stop stop-color="currentcolor" stop-opacity="0" offset="68.9985795%"></stop>
									<stop stop-color="currentcolor" stop-opacity="0.4" offset="92.0941521%"></stop>
									<stop stop-color="currentcolor" stop-opacity="0.8" offset="100%"></stop>
								</radialGradient>
								<circle id="path-2" cx="17" cy="17" r="5"></circle>
								<filter x="-60.0%" y="-60.0%" width="220.0%" height="220.0%" filterUnits="objectBoundingBox"
									id="filter-3-41">
									<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
									<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1">
									</feGaussianBlur>
									<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix"
										in="shadowBlurOuter1"></feColorMatrix>
								</filter>
							</defs>
							<g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<g id="编组备份">
									<circle id="椭圆形" fill="url(#radialGradient-1-42)" cx="17" cy="17" r="17"></circle>
									<circle id="expandingCircle" fill="currentcolor" opacity="0.6" cx="17" cy="17" r="10">
										<animate attributeName="r" from="10" to="20" dur="1s" repeatCount="indefinite" />
										<animate attributeName="opacity" from="0.6" to="0" dur="1s"
											repeatCount="indefinite" />
									</circle>
									<g id="椭圆形">
										<use fill="currentcolor" fill-opacity="1" filter="url(#filter-3-41)"
											xlink:href="#path-2"></use>
										<use fill="currentcolor" fill-rule="evenodd" xlink:href="#path-2"></use>
									</g>
								</g>
							</g>
						</svg>
					</div>
				</div>
				<svg id="duchamp-popover-line" xmlns="http://www.w3.org/2000/svg" width="180" height="134.07227916684863"
					viewBox="0 0 180 134.07227916684863" style="position: absolute; pointer-events: none; top: -134px;"
					:style="{ color: editsCss.svgLineColor }">
					<polyline id="duchamp-popover-polyline" points="0,134.07227916684863 112.5,0 180,0" fill="none"
						stroke="#00d8ff"></polyline>
				</svg>
				<div class="warp_bottom1" ref="warp_bottom1"
					style="position: absolute;  left:161px;top:-255px; width: 327px; height: 254px; overflow: hidden;">
					<div style=" position: absolute; overflow: hidden; width: 100%; height: 100%;">
						<div style=" position: absolute; left: 0px; top: -19px;">
							<img style="width: 100px; height:100px;" src="../assets/122.gif" alt="">
							<div style="position: absolute;left: 13px;font-size: 32px; top: 52px; font-weight: 900;"> 01
							</div>
						</div>
						<div class="back1">
							<div class="bckg" style="position: absolute;">
								<div class="warp_top">
									<div class="Left_hover_warp" style="">
										<div class="Left_hover" style="height: 21px; position:relative;">
											<div class="left_font" :style="{ color: editsCss.titleColor }">{{ info.title }}
											</div>
											<div style="border: 2px solid aqua; margin-top: 26px;" class="line">
											</div>
										</div>
									</div>
								</div>
								<div class="warp_bottom" style="margin: 10px 25px 0 38px"
									:style="{ color: editsCss.color }">
									<ul>
										<li><span class="triangle" ref="triangleElements"></span>
											<div class="leftdiv" ref="triangleElements1"><span>主营业务: <span
														style="width: 100%;">原油开采</span></span>
											</div>
										</li>
										<li><span class="triangle" ref="triangleElements"></span>
											<div class="leftdiv" ref="triangleElements1"><span>成立时间: <span
														style="width: 100%;">1987年12月12日</span></span></div>
										</li>
										<li><span class="triangle" ref="triangleElements"></span>
											<div class="leftdiv" ref="triangleElements1"><span>矿权面积: <span
														style="width: 100%;">{{ info.area }}万</span></span></div>
										</li>
										<li><span class="triangle" ref="triangleElements"></span>
											<div class="leftdiv" ref="triangleElements1">
												<span> 矿权面积：<span style="width: 100%;">{{ info.size }}万平方公里</span></span>
											</div>
										</li>
										<li><span class="triangle" ref="triangleElements"></span>
											<div class="leftdiv" ref="triangleElements1">
												<span> 井站信息：<span style="width: 100%;"> 油井{{ info.youjin }} 气井{{ info.qijin
												}} </span></span>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			warpVisible: false,
			showFirstSvg: false,
			warpLeft: 0,
			warpTop: 0,
			aaa:.7,
			editsCss: {
				svgLineColor: "#00d8ff",
				titleColor: "#000",
				lineColor: "#00d8ff",
				color: "#fff",
				leftdiv: "#00d8ff"
			},
			info: {
				title: "标题",
				area: '1000',
				size: '1000',
				youjin: '123456',
				qijin: '7890'
			}
		};
	},
	methods: {
		init(colors, info) {
			if (colors && typeof colors === 'object') {
				Object.keys(colors).forEach(key => {
					this.editsCss[key] = colors[key];
				});
			}
			this.setData(info);
		},
		setData(info) {
			if (info && typeof info === 'object') {
				Object.keys(info).forEach(key => {
					this.info[key] = info[key];
				});
			}
		},
		handleClick(event) {
			var clickX = event.clientX;
			var clickY = event.clientY;
			// 获取 warrrr 的位置信息
			var warrrrRect = this.$refs.warrrr.getBoundingClientRect();
			var warrrrX = warrrrRect.left;
			var warrrrY = warrrrRect.top;
			// 计算相对于 warrrr 的位置
			var relativeClickX = clickX - warrrrX;
			var relativeClickY = clickY - warrrrY;
			// 计算 distanceToRight 和 distanceToTop
			this.warpLeft = clickX;
			this.warpTop = clickY;
			// 根据点击位置调整样式或其他逻辑
			this.warpVisible = false
			if (relativeClickX < 380 && relativeClickY > 300) {
				this.$nextTick(() => {
					this.$refs.warp_bottom1.style.transform = 'rotateY(0deg)';
					this.$refs.warp.style.transform = 'rotateY(0deg)';
				});
			} else if (relativeClickX > 380 && relativeClickY > 300) {
				this.$nextTick(() => {
					this.$refs.warp_bottom1.style.transform = 'rotateY(180deg)';
					this.$refs.warp.style.transform = 'rotateY(180deg)';
				});
			} else if (relativeClickY < 300 && relativeClickX < 400) {
				this.$nextTick(() => {
					this.$refs.warp_bottom1.style.transform = 'rotateX(180deg)';
					this.$refs.warp.style.transform = 'rotateX(180deg)';
				})
			} else if (relativeClickY < 300 && relativeClickX > 400) {
				this.$nextTick(() => {
					this.$refs.warp_bottom1.style.transform = 'rotate(180deg)';
					this.$refs.warp.style.transform = 'rotate(180deg)';
				})
			}

			setInterval(() => {
				this.warpVisible = true;
			}, 100);
		},
		applyTransformations(bottom1, warp) {
			this.$nextTick(() => {
				this.$refs.warp_bottom1.style.transform = bottom1;
				this.$refs.warp.style.transform = warp;
			});
		},
	},
	mounted() {
		window.vm = this;
		this.init();
		// document.body.addEventListener('click', this.handleClick);
		this.$refs.warrrr.addEventListener('click', this.handleClick);
		const triangleElements = this.$el.querySelectorAll('.triangle');
		triangleElements.forEach((triangle, index) => {
			triangle.style.animationDelay = index * 0.05 + 's';
		});
		const triangleElements1 = this.$el.querySelectorAll('.leftdiv span');
		triangleElements1.forEach((triangle, index) => {
			// 设置动画延迟
			triangle.style.animationDelay = index * 0.05 + 's';
		});
	},
	beforeDestroy() {
		// document.body.removeEventListener('click', this.handleClick);
		this.$refs.warrrr.addEventListener('click', this.handleClick);
	},
};
</script>

<style scoped>
.warp_bottom1 {
	animation: .1s in-out forwards;
}

@keyframes in-out {
	0% {
		width: 0;
	}

	100% {
		width: 277px;
	}
}

#duchamp-popover-path {
	stroke-dasharray: 0, 34;
	stroke-dashoffset: 34;
	animation: move 0.5s linear forwards;
}

@keyframes move {
	0% {
		stroke-dashoffset: 34;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

/* 线条动画 */
#duchamp-popover-line {
	animation: move 0.5s linear forwards;
}

@keyframes move {
	0% {
		stroke-dasharray: 0, 511px;
	}

	100% {
		stroke-dasharray: 511px, 0;
	}
}

.back {
	opacity: 0.85;
	filter: hue-rotate(0deg);
	border-color: transparent;
	border-image-source: url(../assets/背景色.png);
	border-width: 93px 110px;
	border-style: solid;
	border-image-slice: 93 110 fill;
	border-image-repeat: stretch;
	transform: translateZ(0px) perspective(1px);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.warp {
	position: absolute;
	width: 0;
	height: 0;
}

.back1 {

	width: 277px;
	height: 234px;
	position: relative;
	background-image: url(../assets/背景色.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	left: 20px;
	top: 23px;
}

.warp_bottom ul li {
	display: flex;
	/* 使用 flex 布局 */
	align-items: center;
	/* 垂直居中对齐 */
}

.warp_top {
	margin: 25px 25px 0 25px;
	width: 230px;
	display: flex;
}

.Left_hover_warp {
	height: 21px;
	animation-duration: 0.5s;
	animation-name: changeColorwarp;
	animation-fill-mode: both;
	margin-bottom: 5px;
	width: 100px;
	display: flex;
	margin-left: 15px;
	margin-top: 3px;
}

@keyframes changeColorwarp {
	0% {
		background-color: rgb(100, 58, 58);
		/* 初始背景色 */
		width: 50%;
		/* 初始宽度 */
	}

	100% {
		/* 最终背景色 */
		width: 100%;
		/* 最终宽度 */
	}
}

.Left_hover {
	background-image: url('../assets/长方形.png');
	animation-duration: .7s;
	animation-name: changeColor;
	animation-fill-mode: both;
	width: 100%;
	height: 21px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

@keyframes changeColor {
	0% {
		/* 初始背景色 */
		width: 0;
		/* 初始宽度 */
	}

	100% {
		/* 最终背景色 */
		width: 110%;
		/* 最终宽度 */
	}
}

.left_font {
	position: absolute;
	height: 100%;
	width: calc(100% - 20px);
	margin-left: 30px;
	font-weight: 900;
	color: #000;
	animation-duration: 1.5s;
	animation-name: moveLeft;
	animation-fill-mode: both;
}

@keyframes moveLeft {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.line {
	animation-duration: 0.5s;
	animation-name: zoomIn;
	animation-fill-mode: both;
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	50% {
		opacity: 1;
		transform: scale3d(.3, .3, .3);
	}
}

.warp_bottom ul li {
	display: flex;
	/* 使用 flex 布局 */
	align-items: center;
	/* 垂直居中对齐 */
}

.warp_bottom ul li span,
.warp_bottom ul li div {
	display: inline-block;

}

.leftdiv {
	overflow-y: inherit;
	position: relative;
	width: 100%;
	height: 20px;
}

.leftdiv span {
	position: absolute;
	font-size: 12px;
}

.warp_bottom ul li div {
	margin-left: 10px;
	/* 调整 span 和 div 之间的间距 */
}

.warp_bottom ul li span {}

ul {
	margin: 0;
	padding: 0;
}

.warp_bottom ul {
	list-style: none;
}

.warp_bottom ul li {
	line-height: 20px;
}

.triangle {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 10px 6px;
	border-color: transparent transparent #00d8ff transparent;
	margin-right: 5px;
	/* 调整三角形之间的间距 */
	animation: rotateTriangle 0.5s ease-in-out forwards;
	/* 添加旋转动画 */
}

@keyframes rotateTriangle {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(90deg);
	}
}

/* 添加新的关键帧动画，命名为 moveText */
@keyframes moveText {
	0% {
		transform: translateX(-30%);
		/* 初始位置在左侧，超出 leftdiv 的范围 */
		opacity: 0;
		/* 透明度为0，初始不可见 */
	}

	100% {
		transform: translateX(0);
		/* 移动到 leftdiv 的可见区域 */
		opacity: 1;
		/* 完全可见 */
	}
}

.leftdiv span {
	position: absolute;
	opacity: 0;
	animation: moveText .5s ease-in-out forwards;
	width: 100px;
	/* 应用动画效果，时间可以根据需要调整 */
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
